<template>
  <div>
    <!--Begin Header Begin-->
    <Header ></Header>
    <!--End Header End-->
    <!--Begin Login Begin-->
    <div class="log_bg">

      <div class="login">
        <div class="log_img"><img src="/static/images/l_img.png" width="611" height="425" /></div>
        <div class="log_c">
          <form>
            <table border="0" style="width:370px; font-size:14px; margin-top:30px;" cellspacing="0" cellpadding="0">
              <tr height="50" valign="top">
                <td width="55">&nbsp;</td>
                <td>
                  <span class="fl" style="font-size:24px;">登录</span>
                  <span class="fr">还没有商城账号，<a href="/register" style="color:#ff4e00;">立即注册</a></span>
                </td>
              </tr>
              <tr height="70">
                <td>用户名</td>
                <td><input type="text" value="" class="l_user" v-model="user.userName" /></td>
              </tr>
              <tr height="70">
                <td>密&nbsp; &nbsp; 码</td>
                <td><input type="password" value="" class="l_pwd" v-model="user.userPwd" /></td>
              </tr>
              <tr>
                <td>&nbsp;</td>
                <td style="font-size:12px; padding-top:20px;">
                 <span style="font-family:'宋体';" class="fl">
                     <label class="r_rad"><input type="checkbox" /></label><label class="r_txt">请保存我这次的登录信息</label>
                    </span>
                  <span class="fr"><a href="#" style="color:#ff4e00;">忘记密码</a></span>
                </td>
              </tr>
              <tr height="60">
                <td>&nbsp;</td>
                <td><input type="button" value="登录" class="log_btn" @click="login" /></td>
              </tr>
            </table>
          </form>
        </div>
      </div>
    </div>
    <!--End Login End-->
    <!--Begin Footer Begin-->
    <Footer></Footer>
    <!--End Footer End -->
  </div>
</template>

<script>
  import Header from "../common/Header";
  import Footer from "../common/Footer";

  export default {
    name: "Login",
    components:{
      Header,
      Footer
    },
    data(){
      return{
        user:{
          userName:"rock",
          userPwd:"123456"
        },
        info:""
      }
    },
    methods:{
      login:function () {//用户登录
          const self = this;
          //1 发送ajax请求
          const http =this.$http.post("/server-login/user-info/user",this.user);
          //2 定义请求回调函数
          http.then(function (rs) {
              if(rs.data.code==200){
                 //存入token到客户端的本地存储里
                 sessionStorage.setItem("token",rs.data.data);
                 //跳转到商场首页
                 //push和repalce 的区别： push可以回退到上一个页面，replace不可以，一般来说安全性高 用replace
                 self.$router.push({"name":"Index",query:{"name":self.user.userName}});
                 //self.$router.replace("/index");

              }

          })
      }
    }


  }
</script>

<style scoped>

</style>

